<template>
	<div class="divuepagination">
		<ul class="pagination">
			<li v-show="di_coping" v-bind:class="{disabled:di_current==1}">
			  <a v-on:click="clickFirst">
				<span>第一页</span>
			  </a>
			</li>
			<li v-on:click="clickPrev" v-bind:class="{disabled:di_current==1}">
			  <a>
				<span>上一页</span>
			  </a>
			</li>
			
			<li v-for="(item,index) in di_pageNum" v-bind:class="{active:di_current==item}" v-on:click="clickCurrent(item)" v-show="di_showPageNum"><a>{{item}}</a></li>
			
			<li v-on:click="clickNext" v-bind:class="{disabled:di_current==di_pageCount}">
			  <a>
				<span>下一页</span>
			  </a>
			</li>
			<li v-show="di_coping" v-bind:class="{disabled:di_current==di_pageCount}">
			  <a v-on:click="clickLast">
				<span>最后一页</span>
			  </a>
			</li>
		</ul>	
		<div class="divuepage">
			<div class="divuepage-text" v-show="di_showPageCount">共{{di_pageCount}}页</div>
			<div class="divuepage-text" v-show="di_showTotalData">共{{di_totalData}}条记录</div>
			<input class="divuepage-input" type="text" v-model="skipvalue" v-show="di_showSkipPage" />
			<button class="divuepage-btn" v-on:click="clickSkip" v-show="di_showSkipPage">跳转</button>
		</div>
	</div>

</template>

<script>
export default {
  name: 'divuePagination',
  computed:{
	di_current:function(){
		return this.current
	},  //存放返回当前第几页               
	di_count:function(){
		if(this.count>=1){
			return this.count
		}else{
			return this.options.count
		}
		
	},   //当前页前后页数    (默认：2)                         
	di_pageCount:function(){
		return this.pageCount?this.pageCount:this.options.pageCount
	},   //存放返回总页数        
	di_showPageNum:function(){
		return this.showPageNum==1?true:false
	},   //是否显示页码 
	di_showPageCount:function(){
		return this.showPageCount==1?true:false
	},   //是否显示总页数        
	di_totalData:function(){
		return this.totalData?this.totalData:this.options.totalData
	},   //存放返回数据总条数          
	di_showTotalData:function(){
		return this.showTotalData==1?true:false
	},   //是否显示数据总条数     
	di_nextPage:function(){
		return this.nextPage?this.nextPage:this.options.nextPage
	},   //是否有下一页               
	di_coping:function(){
		return this.coping==1?true:false
	},   //是否开启首页尾页 
	di_showSkipPage:function(){
		return this.showSkipPage==1?true:false
	},   //是否显示跳页功能 
  	di_pageNum:function(){//页码生成

		var arr=[];//页码数组
		var show_num_size=Number(this.di_count)*2+1;//依据当前页前后页数 计算总页码个数
		
		if(this.di_pageCount<=show_num_size){
			for(var i=1;i<=this.di_pageCount;i++){
				arr.push(i);
			}
			
		}else{
			
			if(this.di_current<=this.di_count){
				for(var i=1;i<=show_num_size;i++){
					arr.push(i);
				}
			}else if(this.di_current>this.di_pageCount-this.di_count){
				for(var i=this.di_pageCount-show_num_size+1;i<=this.di_pageCount;i++){
					arr.push(i);
				}
			}else{
				for(var i=this.di_current-this.di_count;i<=Number(this.di_current)+Number(this.di_count);i++){
					arr.push(i);
				}
			}
			
		}
		return arr;
	}
                  
  },
  data:function(){
  	return {
		skipvalue:"", //跳页功能：输入框值
		options:{//默认值配置
			count:2,                //当前页前后页数    (默认：2)
			pageCount:1,            //存放返回总页数
			totalData:1,            //存放返回数据总条数
			nextPage:false         //是否有下一页
		}
		
	}
  },
  props:["current","count","pageCount","showPageNum","showPageCount","totalData","showTotalData","nextPage","coping","showSkipPage"],
  methods:{
  	clickFirst:function(){//点击第一页	
		if(this.di_current-1<1){
			return false;
		}
		this.$emit("runAjax",1);
	},
	clickCurrent:function(item){//点击某一页
		this.$emit("runAjax",item);
	},
	clickLast:function(){//点击最后一页
		if(Number(this.di_current)+1>this.di_pageCount){
			return false;
		}
		this.$emit("runAjax",this.di_pageCount);
	},
	clickPrev:function(){//点击上一页
		if(this.di_current-1<1){
			return false;
		}
		this.$emit("runAjax",this.di_current-1);
	},
	clickNext:function(){//点击下一页
		if(Number(this.di_current)+1>this.di_pageCount){
			return false;
		}
		this.$emit("runAjax",Number(this.di_current)+1);
	},
	clickSkip:function(){//点击下一页
		if(isNaN(this.skipvalue)){
			console.log("必须是数字")
			return false;
		}
		if(this.skipvalue<1 || this.skipvalue>this.di_pageCount){
			console.log("超过范围")
			return false;
		}
		this.$emit("runAjax",this.skipvalue);
	}
  },
  created:function(){
	
	
  }
}
</script>

<style>
.divuepagination{
	text-align:center;
	font-size:14px;
}
.divuepage{
	display: inline-block;
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px;
	vertical-align:top;
}
.divuepage .divuepage-text{
	float: left;
	padding: 6px 12px;
	line-height: 1.42857143;
	color: #337ab7;
	margin:0 2px;
	border-radius: 4px;
	border:none;
}
.divuepage .divuepage-btn{
	float: left;
	padding: 6px 12px;
	line-height: 1.42857143;
	color: #337ab7;
	margin:0 2px;
	border-radius: 4px;
	border:none;
	border: 1px solid #dddddd;
	cursor:pointer;
}
.divuepage .divuepage-input{
	width:40px;
	float: left;
	padding: 6px 12px;
	line-height: 1.42857143;
	color: #337ab7;
	margin:0 2px;
	border-radius: 4px;
	border:none;
	border: 1px solid #dddddd;
}
.pagination {
  display: inline-block;
  padding-left: 0;
  margin: 20px 0;
  border-radius: 4px;
}
.pagination > li {
  display: inline;
}
.pagination > li > a,
.pagination > li > span {
  position: relative;
  float: left;
  padding: 6px 12px;
  line-height: 1.42857143;
  text-decoration: none;
  color: #337ab7;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  margin-left: -1px;
  cursor:pointer;
}
.pagination > li:first-child > a,
.pagination > li:first-child > span {
  margin-left: 0;
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
}
.pagination > li:last-child > a,
.pagination > li:last-child > span {
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
}
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
  z-index: 2;
  color: #23527c;
  background-color: #eeeeee;
  border-color: #dddddd;
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  z-index: 3;
  color: #ffffff;
  background-color: #337ab7;
  border-color: #337ab7;
  cursor: default;
}
.pagination > .disabled > span,
.pagination > .disabled > span:hover,
.pagination > .disabled > span:focus,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
  color: #777777;
  background-color: #ffffff;
  border-color: #dddddd;
  cursor: not-allowed;
}
</style>
